<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书信息管理系统</title>
    <!-- 先大体布局，最后面再来调样式 -->
    <style>
        body{
            height: 100vh;
            margin: 0;
            padding: 0;
            font-size: 20px;
            /* background-image: url("./bookshelves.png"); */
            background-repeat: no-repeat;
            background-size:cover;
        }
        t-header{
            display: block;
            height: 45px;
            font-size: 20rpx;
                opacity: 0.7;
            background-color: blue;
        }
        t-content{
            display: flex;
            
        }
        t-sider{
            width: 20%;
            height: 100vh;
            opacity: 0.7;
        }
        t-main{
            background-color: #ccc;
            opacity: 0.7;
            width: 80%;
        }
        .sider_item:hover{
            cursor: pointer;
            background-color: #ccc;
        }
        /*添加一个样式*/


        .img{
            width: 150px;
            height: 150px;
            border: 1px dotted black;
            background-size: auto;
        }

        .divList{
            display: flex;
            padding: 30px;
            justify-content: center;
            align-items: center;
            border: 1px solid black;
        }

        .divListItem {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            border: 1px solid black;
            overflow: hidden;
            width: 200px;
            height: 200px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <t-header>头部信息</t-header>
    <t-content>
        <t-sider>
        </t-sider>
        <t-main></t-main>
    </t-content>
    <div class="test"></div>
</body>
<script src="./home.js"></script>
<script src="./bookShelf.js"></script>
<script src="./data.js"></script>
<script src="./readBook.js"></script>
<script>
    //声明变量
    const t_sider = document.querySelector("t-sider")
    const t_main = document.querySelector("t-main")

    //创建侧边栏的div对象
    function createSiderElement(obj){
        //判断obj是否存在
        if(!obj){
            console.log("obj不存在")
            return //跳出函数
        }
        //这里进行一次for循环就可以了,对侧边栏数据进行遍历
        data.siderData.forEach((item, index) => {
            const div = document.createElement("div")
            div.className = "sider_item"
            div.innerHTML = item.name
            console.log(div)
            t_sider.appendChild(div)
        })
        //创建元素之后对该元素进行监听
        const sider_item = document.querySelectorAll(".sider_item");
        //没有触发点击事情之前先确认点击为第一个侧边栏数据
        homePage(t_main)
        sider_item[0].style.backgroundColor = "#ccc"
        sider_item.forEach((item, index) => {
            item.addEventListener("click", function (){
                sider_item.forEach((item1, index1) => {
                    item1.style.backgroundColor = "#fff"
                })
                item.style.backgroundColor = "#ccc"
                //触发点击事件之后
                changeOptions(index)
            })
        })
    }


    //这只是切换页面的一个工具函数
    function changeOptions(index){
        if(index === 0){
            console.log("首页")
            homePage(t_main)
        }else if(index === 1){
            console.log("图书信息管理")
            //渲染完之后进行点击事件的添加
            bookShelf(t_main, data.bookShelves)
        }
    }

    //创建点击之后的样式函数

    //创建元素
    createSiderElement(t_sider)
    changeOptions()




</script>
</html>